<template>
	<view class="regContainer">
		<view class="navBarContainer">
			<view class="navBar">
				<view class="back" @click="goBack">
					<view class="iconContainer">
						<u-icon name="arrow-left" size="20"></u-icon>
					</view>
				</view>
				<text class="title">注册</text>
				<view class="other">
					
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<uni-forms :modelValue="formData" :rules="rules">
			<uni-forms-item>
				<button class="head" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="formData.avatarUrl" mode="widthFix"></image>
				</button>
			</uni-forms-item>
			<view class="loginContainer">
				<view class="username">
					<uni-forms-item name="name">
						<u-input placeholder="姓名" shape="circle"
						customStyle="backgroundColor:#FFF" type="nickname" v-model="formData.name">
							<u-text
								text="姓名"
								slot="prefix"
								margin="0 3px 0 0"
								type="tips"
							></u-text>
						</u-input>
					</uni-forms-item>
				</view>
				<view class="name">
					<uni-forms-item name="username">
						<u-input placeholder="用户名" shape="circle"
						customStyle="backgroundColor:#FFF" v-model="formData.username">
							<u-text
								text="用户名"
								slot="prefix"
								margin="0 3px 0 0"
								type="tips"
							></u-text>
						</u-input>
					</uni-forms-item>
				</view>
				<view class="phone">
					<uni-forms-item>
						<u-input placeholder="联系电话" shape="circle"
						customStyle="backgroundColor:#FFF" v-model="formData.phone">
							<u-text
								text="联系电话"
								slot="prefix"
								margin="0 3px 0 0"
								type="tips"
							></u-text>
						</u-input>
					</uni-forms-item>
				</view>
				<view class="password">
					<uni-forms-item>
						<u-input placeholder="密码" shape="circle"
						customStyle="backgroundColor:#FFF" v-model="formData.password"
						type="password"
						v-if="showPassword==false">
							<u-text
								text="密码"
								slot="prefix"
								margin="0 3px 0 0"
								type="tips"
							></u-text>
							<view slot="suffix" class="inactiveEye" @click="showPassword=!showPassword"></view>
						</u-input>
					</uni-forms-item>
				</view>
				<view class="password">
					<uni-forms-item>
						<u-input placeholder="密码" shape="circle"
						customStyle="backgroundColor:#FFF" v-model="formData.password"
						v-if="showPassword!=false">
							<u-text
								text="密码"
								slot="prefix"
								margin="0 3px 0 0"
								type="tips"
							></u-text>
							<view slot="suffix" class="activeEye" @click="showPassword=!showPassword"></view>
						</u-input>
					</uni-forms-item>
				</view>
				<view class="login" @click="gotoLogin" form-type="submit">
					注册
				</view>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword:false,
				formData:{
					avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					username:'',
					phone:'',
					password:'',
					name:'',
				},
				rules:{
					name:{
						rules:[
							{
								required: true,
								errorMessage: '请填写姓名',
							}
						]
					},
					username:{
						rules:[
							{
								required: true,
								errorMessage: '请填写姓名',
							}
						]
					}
				}
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			onChooseAvatar(e) {
			    this.formData.avatarUrl=e.detail.avatarUrl
			},
			gotoLogin(){
				uni.request({
					url:'http://localhost:8080/kfc/user/user/register',
					method:'post',
					data:{
						username:this.formData.username,
						name:this.formData.name,
						avatar:this.formData.avatarUrl,
						phone:this.formData.phone,
						password:this.formData.password
					},
					success:(res)=>{
						console.log(res.data)
						if(res.data.msg=='重复账号'){
							this.$refs.uToast.show({
								type: 'error',
								icon: false,
								title: '账号已存在',
								message: res.data.msg,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
							})
						}
						else{
							this.$refs.uToast.show({
								type: 'success',
								title: '注册成功',
								message: "注册成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
								complete(){
									uni.navigateTo({
										url:'./getUserInfo'
									})
								}
							})
						}
					},
					fail:(res)=>{
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '注册失败',
							message: res.data.msg,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			},
			formSubmit:function(e){
				console.log('提交数据',JSON.stringify(e.detail.value))
			},
			formReset: function(e) {
				console.log('清空数据')
			},
		}
	}
</script>

<style>
	page{
		background-color: rgb(247,247,247);
	}
</style>

<style lang="scss" scoped>
	.regContainer{
		.navBarContainer{
			width: 100vw;
			height: 200rpx;
			position: fixed;
			z-index: 99;
			top:0rpx;
			left: 0;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 30rpx;
			.navBar{
				width: 90%;
				margin: 0 auto;
				margin-top: 100rpx;
				background-color: #FFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.back,.other{
					width: 70rpx;
				}
				.title{
					font-size: 30rpx;
				}
			}
		}
		.head{
			margin: 0 auto;
			margin-top: 400rpx;
			width: 200rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
			>image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		.loginContainer{
			display: flex;
			flex-direction: column;
			align-items: center;
			>view{
				width: 500rpx;
			}
			.password{
				.inactiveEye{
					width: 32rpx;
					height: 32rpx;
					background-image: url(../../static/login/inactiveEye.png);
					background-position: center;
					background-size: contain;
					margin-right: 30rpx;
				}
				.activeEye{
					width: 32rpx;
					height: 32rpx;
					background-image: url(../../static/login/activeEye.png);
					background-position: center;
					background-size: contain;
					margin-right: 30rpx;
				}
			}
			.name{
				margin-top: 20rpx;
			}
			.phone{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
			.login{
				display: flex;
				align-items: center;
				justify-content: center;
				color:#FFF;
				background-color: rgb(228,0,48);
				margin-top: 30rpx;
				height: 60rpx;
				border-radius: 30rpx;
			}
		}
	}
</style>
